<!doctype html>
<meta charset="utf-8">
 
<script src="http://jiecaogc.oss-cn-hangzhou.aliyuncs.com/d3.js"></script>
<script src="http://jiecaogc.oss-cn-hangzhou.aliyuncs.com/d3plus.js"></script>
<script src="http://jiecaogc.oss-cn-hangzhou.aliyuncs.com/topojson.js"></script> 

<div style="text-align: center;">
    <h3>各省市获得各档加分的总人数分布</h3>
</div>
<div id="viz1"></div>
<script>
  var sample_data = [
    {"人数": 21, "Province": "fu_jian", "name": "福建"},
    {"人数": 46, "Province": "he_nan", "name": "河南"},
    {"人数": 133, "Province": "jiang_su", "name": "江苏"},
    {"人数": 19, "Province": "jiang_xi", "name": "江西"},
    {"人数": 16, "Province": "liao_ning", "name": "辽宁"},
    {"人数": 129, "Province": "shan_dong", "name": "山东"},
    {"人数": 154, "Province": "shang_hai", "name": "上海"},
    {"人数": 36, "Province": "si_chuan", "name": "四川"},
    {"人数": 50, "Province": "yun_nan", "name": "云南"},
    {"人数": 53, "Province": "zhe_jiang", "name": "浙江"},
    {"人数": 14, "Province": "bei_jing", "name": "北京"},
    {"人数": 11, "Province": "gui_zhou", "name": "贵州"},
  ]

  var visualization = d3plus.viz()
    .container("#viz1")
    .data(sample_data)
    .type("geo_map")
    .coords({
      // "solo": ["Gansu","Qinghai","Guangxi","Guizhou"],
       // "value": "/d3/zh-mainland-provinces.topo.json"
      "value": "china.topo.json"
    })
    .id("Province")
    .text("name")
    .color("人数")
    .tooltip("人数")
    // .title("")
    .draw()
</script>
